<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态渲染轮播图</title>
</head>
<style>
    .all{
        margin: auto;
        height: 300px;
        width: 400px;
        font-size: 50px;
        position: relative;
    }
    img{
        width: 400px;
        height: 300px;
        position: absolute;
        top: 0;
    }
    all>img:first-of-type{z-index: 1;}
    ul{
        width: 400px;
        list-style:none;
        display: flex;
        justify-content: space-around;
        position: absolute;
        bottom: -20px;
        padding: 0;
    }
    li{
        z-index: 2;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color:rgba(108, 108, 108, 0.2);
    }
    p{
        width: 50px;
        height: 60px;
        z-index: 2;
        position: absolute;
        top: 22%;
        cursor: pointer;
    }
    .all>p:last-of-type{
        position: absolute;
        top: 22%;
        right: 0;
    }
</style>
<body>
    <div class="all">
        <!-- <img src="https://project-students-cms-1251395798.cos.ap-nan…690171053017_c9ae8eed2e7b38f3d5eec59c487b7ee0.jpg" alt=""> -->
        <p>&lt;</p>
        <p>&gt;</p>
        <ul>
           <!-- <li></li>
           <li></li>  -->
        </ul>
    </div>
    <script src="ajax.js"></script>
    <script>
        let all=document.querySelector('.all')
        let ul=document.querySelector('ul')
        let urlList
        const baseUrl='https://service-dmsf9bxc-1251395798.gz.apigw.tencentcs.com/release'
        ajax({
            baseUrl,
            url:'/api/web/carouselGroup/getAllCarouselGroup?projectId=6',
            method:'GET',
            data:{},
            headers:{'Content-Type': 'application/json; charset=UTF-8'},
            callback:e=>{
                let data = e.data.rows[0].w_carousels
                urlList= data.map(o=>{
                    let url
                    for (const key in o) {
                       if (key ==="url")url=o[key]
                    }
                    return url
                })
                Data()
                listen() 
                function Data(){
                urlList.forEach((v,i)=>{
                    ul=document.getElementsByTagName('ul')
                    //ul+=`<li data-i='${i}'></li>`//???????????????????
                    all.innerHTML+=`<img src=${v} data-i=${i} >`
                })
                }
            }
        })
        
        function listen(){
            let now=last=0
            let img=document.querySelectorAll('img')
            all.addEventListener("click",()=>{
                if(event.target.localName=='p'&& event.target.dataset.i=='0'){//向左
                    img[last].style["z-index"]='0'
                    if(--last<0)now=last+img.length
                    else now=last
                    img[now].style["z-index"]='1'
                    last=now
                }
                if(event.target.localName=='p'&& event.target.dataset.i=='1'){//向右
                    img[last].style["z-index"]='0'
                    if(++last>img.length)now=last-img.length
                    else now=last
                    img[now].style["z-index"]='1'
                    last=now
                }
                
            })
        }
    </script>
</body>
</html>